<template>
    <el-form-item :label="item.label" :class="{'block':item.block}">
    <!--文本框 subtype不同类型-->
    <el-input 
      v-if="item.type==='input'" 
      :type="item.subtype" 
      :placeholder="item.placeholder" 
      :disabled=true 
      :value="item.value"
      :autosize="item.autosize">
    </el-input>

    <!--数字框计数器-->
    <el-input-number
      v-else-if="item.type==='number'"
      label="item.placeholder"
      :disabled=true 
      :autosize="item.autosize"
      :value="item.value"
      :min="1" 
      :max="10" 
    ></el-input-number>

    <!-- 多选框
    <el-checkbox
      v-else-if="item.type==='switch' && item.appearance==='checkbox'"
      :value="item.value"
      :disabled=true 
    ></el-checkbox> -->

    <!--开关-->
    <el-switch
      v-else-if="item.type==='switch'"
      :value="item.value"
      :disabled=true 
      :active-value="item.activeValue"
      :inactive-value="item.inactiveValue"
    ></el-switch>

    <!--单选框组-->
    <el-radio-group
      v-else-if="item.type==='radio'"
      :value="item.value"
      :disabled=true 
    >
      <component
        v-for="o in item.optionsUrl&&item.optionsUrl!=''?ajaxOptions:item.options"
        :is="item.button?'el-radio-button':'el-radio'"
        :key="o.value"
        :label="o.value"
        disabled
        :border="item.border"
      >{{ o.label }}</component>
    </el-radio-group>
    
    <!--多选框组-->
    <el-checkbox-group
      v-else-if="item.type==='checkbox'"
      :value="item.value"
      :disabled=true 
    >
      <component
        v-for="o in item.optionsUrl&&item.optionsUrl!=''?ajaxOptions:item.options"
        :is="item.button?'el-checkbox-button':'el-checkbox'"
        :key="o.value"
        disabled
        :label="o.value"
        :border="item.border"
      >{{ o.label }}</component>
    </el-checkbox-group>

    <!--选择框-->
    <el-select
      v-else-if="item.type==='select'"
      :multiple="item.subtype == 'multi'?true:false"
      :value="item.value"
    >
      <el-option
        v-for="o in item.optionsUrl&&item.optionsUrl!=''?ajaxOptions:item.options"
        :key="o.value"
        :label="o.label"
        :value="o.value"
        disabled
      >
      </el-option>
    </el-select>

    <!--级联选择器-->
    <el-cascader
      v-else-if="item.type==='cascader'"
      :options="item.optionsUrl&&item.optionsUrl!=''?ajaxOptions:item.options"
      :value="item.value"
    ></el-cascader>

    <!--TimePicker 时间选择器-->
    <el-time-picker
      v-else-if="item.type==='time'"
      :format="item.valueFormat"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      :value="item.value"
    ></el-time-picker>

    <!--DatePicker 日期选择器-->
    <el-date-picker
      v-else-if="item.type==='date'"
      :type="item.subtype"
      :format="item.viewFormat||item.valueFormat"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      :value="item.value"
    ></el-date-picker>

    <!--富文本
    <richtext
      v-else-if="item.type==='richtext'"
      v-bind="$attrs"
      v-on="$listeners"
    ></richtext>-->

    <!--upload 文件上传-->
    <el-upload
      class="upload-demo"
      v-else-if="item.type==='upload' && item.subtype==='upload'"
      :action="item.uploadUrl"
      :multiple="item.multiple"
      :limit="item.limit"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>

    <picture-upload
      class="avatar-uploader"
      v-else-if="item.type==='upload' && item.subtype==='picture-img'"
      :disabled="true"
      :uploadFilesUrl="''"
      :item="item"
    >
    </picture-upload>

    <span v-else>未知控件类型</span>

  </el-form-item>

</template>

<script>
import PictureUpload from "@/components/pictureUpload";

export default {
  components: { PictureUpload },
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      ajaxOptions: [
        {
          value: '0',
          label: '动态获取',
        },
      ],
    };
  },
  methods: {
  }
};
</script>
